<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Dunzo admin is super flexible, powerful, clean &amp; modern responsive bootstrap 5 admin template with unlimited possibilities.">
    <meta name="keywords" content="admin template, Dunzo admin template, dashboard template, flat admin template, responsive admin template, web app">
    <meta name="author" content="pixelstrap">
    <link rel="icon" href="../assets/images/favicon.png" type="image/x-icon">
    <link rel="shortcut icon" href="../assets/images/favicon.png" type="image/x-icon">
    <title>Dunzo - Premium Admin Template</title>
    <!-- Google font-->
    <link href="https://fonts.googleapis.com/css?family=Outfit:400,400i,500,500i,700,700i&amp;display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900&amp;display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../assets/css/font-awesome.css">
    <!-- ico-font-->
    <link rel="stylesheet" type="text/css" href="../assets/css/vendors/icofont.css">
    <!-- Themify icon-->
    <link rel="stylesheet" type="text/css" href="../assets/css/vendors/themify.css">
    <!-- Flag icon-->
    <link rel="stylesheet" type="text/css" href="../assets/css/vendors/flag-icon.css">
    <!-- Feather icon-->
    <link rel="stylesheet" type="text/css" href="../assets/css/vendors/feather-icon.css">
    <!-- Plugins css start-->
    <link rel="stylesheet" type="text/css" href="../assets/css/vendors/slick.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/vendors/slick-theme.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/vendors/scrollbar.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/vendors/animate.css">
    <!-- Plugins css Ends-->
    <!-- Bootstrap css-->
    <link rel="stylesheet" type="text/css" href="../assets/css/vendors/bootstrap.css">
    <!-- App css-->
    <link rel="stylesheet" type="text/css" href="../assets/css/style.css">
    <link id="color" rel="stylesheet" href="../assets/css/color-1.css" media="screen">
    <!-- Responsive css-->
    <link rel="stylesheet" type="text/css" href="../assets/css/responsive.css">
  </head>
  <body> 
    <!-- loader starts-->
    <div class="loader-wrapper">
      <div class="theme-loader">    
        <div class="loader-p"></div>
      </div>
    </div>
    <!-- loader ends-->
    <!-- tap on top starts-->
    <div class="tap-top"><i data-feather="chevrons-up"></i></div>
    <!-- tap on tap ends-->
    <!-- page-wrapper Start-->
    <div class="page-wrapper compact-wrapper" id="pageWrapper">
      <!-- Page Header Start-->
      <div class="page-header">
        <div class="header-wrapper row m-0">
          <div class="header-logo-wrapper col-auto p-0">
            <div class="logo-wrapper"><a href="index.html"><img class="img-fluid for-light" src="../assets/images/logo/logo-1.png" alt=""><img class="img-fluid for-dark" src="../assets/images/logo/logo.png" alt=""></a></div>
            <div class="toggle-sidebar">
              <svg class="sidebar-toggle"> 
                <use href="../assets/svg/icon-sprite.svg#stroke-animation"></use>
              </svg>
            </div>
          </div>
          <div class="left-header col-xxl-5 col-xl-6 col-auto box-col-6 horizontal-wrapper p-0">
            <div class="left-menu-header">
              <ul class="app-list">
                <li class="onhover-dropdown">
                  <div class="app-menu"> <i data-feather="folder-plus"></i></div>
                  <ul class="onhover-show-div left-dropdown">
                    <li> <a href="file-manager.html">File Manager</a></li>
                    <li> <a href="kanban.html"> Kanban board</a></li>
                    <li> <a href="social-app.html"> Social App</a></li>
                    <li> <a href="bookmark.html"> Bookmark</a></li>
                  </ul>
                </li>
              </ul>
              <ul class="header-left"> 
                <li class="onhover-dropdown"><span class="f-w-500">
                    <svg>
                      <use href="../assets/svg/icon-sprite.svg#fill-bonus"></use>
                    </svg>Bonus Ui</span>
                  <ul class="onhover-show-div left-dropdown">
                    <li><a href="scrollable.html">Scrollable</a></li>
                    <li><a href="tree.html">Tree view</a></li>
                    <li><a href="toasts.html">Toasts</a></li>
                    <li><a href="rating.html">Rating</a></li>
                    <li><a href="dropzone.html">dropzone</a></li>
                    <li><a href="tour.html">Tour</a></li>
                    <li><a href="sweet-alert2.html">SweetAlert2</a></li>
                    <li><a href="modal-animated.html">Animated Modal</a></li>
                    <li><a href="owl-carousel.html">Owl Carousel</a></li>
                    <li><a href="ribbons.html">Ribbons</a></li>
                    <li><a href="pagination.html">Pagination</a></li>
                    <li><a href="breadcrumb.html">Breadcrumb</a></li>
                    <li><a href="range-slider.html">Range Slider</a></li>
                    <li><a href="image-cropper.html">Image cropper</a></li>
                    <li><a href="basic-card.html">Basic Card</a></li>
                    <li><a href="creative-card.html">Creative Card</a></li>
                    <li><a href="dragable-card.html">Draggable Card</a></li>
                    <li><a href="timeline-v-1.html">Timeline</a></li>
                  </ul>
                </li>
                <li class="onhover-dropdown"><span class="f-w-500">
                    <svg>
                      <use href="../assets/svg/icon-sprite.svg#fill-Grid"></use>
                    </svg>Level Menu</span>
                  <ul class="onhover-show-div left-dropdown">
                    <li><a href="add-products.html">Add Product</a></li>
                    <li><a href="product.html">Product</a></li>
                    <li><a href="product-page.html">Product page</a></li>
                    <li><a href="list-products.html">Product list</a></li>
                    <li><a href="payment-details.html">Payment Details</a></li>
                    <li><a href="order-history.html">Order History</a></li>
                    <li><a href="invoice-template.html">Invoice</a></li>
                    <li><a href="cart.html">Cart</a></li>
                    <li><a href="list-wish.html">Wishlist</a></li>
                    <li><a href="checkout.html">Checkout</a></li>
                    <li><a href="pricing.html">Pricing  </a></li>
                  </ul>
                </li>
                <li class="onhover-dropdown"> <span class="f-w-500">
                    <svg>
                      <use href="../assets/svg/icon-sprite.svg#fill-Perk-Ui"></use>
                    </svg>Project</span>
                  <ul class="onhover-show-div left-dropdown">
                    <li><a href="projects.html">Project List</a></li>
                    <li><a href="projectcreate.html">Create new</a></li>
                  </ul>
                </li>
                <li class="onhover-dropdown p-0"><span class="f-w-500">
                    <svg>
                      <use href="../assets/svg/icon-sprite.svg#fill-bonus"></use>
                    </svg>Blog</span>
                  <ul class="onhover-show-div left-dropdown">
                    <li><a href="blog.html">Blog Details</a></li>
                    <li><a href="blog-single.html">Blog Single</a></li>
                    <li><a href="add-post.html">Add Post</a></li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
          <div class="nav-right col-xxl-7 col-xl-6 col-auto box-col-6 pull-right right-header p-0 ms-auto">
            <ul class="nav-menus">
              <li class="serchinput">
                <div class="serchbox">
                  <svg>
                    <use href="../assets/svg/icon-sprite.svg#fill-search"></use>
                  </svg>
                </div>
                <div class="form-group search-form">
                  <input type="text" placeholder="Search here...">
                </div>
              </li>
              <li>
                <div class="form-group w-100">
                  <div class="Typeahead Typeahead--twitterUsers">
                    <div class="u-posRelative d-flex">
                      <svg class="search-bg svg-color me-2">
                        <use href="../assets/svg/icon-sprite.svg#fill-search"></use>
                      </svg>
                      <input class="demo-input py-0 Typeahead-input form-control-plaintext w-100" type="text" placeholder="Search Dunzo .." name="q" title="">
                    </div>
                  </div>
                </div>
              </li>
              <li class="onhover-dropdown">
                <div class="notification-box">
                  <svg>
                    <use href="../assets/svg/icon-sprite.svg#fill-Bell"></use>
                  </svg>
                </div>
                <div class="onhover-show-div notification-dropdown">
                  <h6 class="f-18 mb-0 dropdown-title">Notitications                               </h6>
                  <ul>
                    <li class="b-l-primary bg-light-primary border-4 mt-3">
                      <p class="font-primary">Delivery processing <span class="font-primary">10 min.</span></p>
                    </li>
                    <li class="b-l-secondary bg-light-secondary border-4 mt-3">
                      <p class="font-secondary">Order Complete<span class="font-secondary">1 hr</span></p>
                    </li>
                    <li class="b-l-success bg-light-success border-4 mt-3">
                      <p class="font-success">Tickets Generated<span class="font-success">3 hr</span></p>
                    </li>
                    <li class="b-l-info bg-light-info border-4 mt-3">
                      <p class="font-info">Delivery Complete<span class="font-info">6 hr</span></p>
                    </li>
                    <li><a class="f-w-700" href="private-chat.html">Check all</a></li>
                  </ul>
                </div>
              </li>
              <li class="onhover-dropdown">
                <svg>
                  <use href="../assets/svg/icon-sprite.svg#fill-star"></use>
                </svg>
                <div class="onhover-show-div bookmark-flip">
                  <div class="flip-card">
                    <div class="flip-card-inner">
                      <div class="front">
                        <h6 class="f-18 mb-0 dropdown-title">Bookmark</h6>
                        <ul class="bookmark-dropdown">
                          <li>
                            <div class="row">
                              <div class="col-4 text-center">
                                <div class="bookmark-content">
                                  <div class="bookmark-icon"><i data-feather="file-text"></i></div><span>Forms</span>
                                </div>
                              </div>
                              <div class="col-4 text-center">
                                <div class="bookmark-content">
                                  <div class="bookmark-icon"><i data-feather="user"></i></div><span>Profile</span>
                                </div>
                              </div>
                              <div class="col-4 text-center">
                                <div class="bookmark-content">
                                  <div class="bookmark-icon"><i data-feather="server"></i></div><span>Tables</span>
                                </div>
                              </div>
                            </div>
                          </li>
                          <li class="text-center"><a class="flip-btn f-w-700" id="flip-btn" href="javascript:void(0)">Add New Bookmark</a></li>
                        </ul>
                      </div>
                      <div class="back">
                        <ul>
                          <li>
                            <div class="bookmark-dropdown flip-back-content">
                              <input type="text" placeholder="search...">
                            </div>
                          </li>
                          <li><a class="f-w-700 d-block flip-back" id="flip-back" href="javascript:void(0)">Back</a></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="cart-nav onhover-dropdown">
                <div class="cart-box">
                  <svg>
                    <use href="../assets/svg/icon-sprite.svg#fill-Buy"></use>
                  </svg>
                </div>
                <div class="cart-dropdown onhover-show-div">
                  <h6 class="f-18 mb-0 dropdown-title">Cart</h6>
                  <ul>
                    <li>
                      <div class="d-flex"><img class="img-fluid b-r-5 img-60" src="../assets/images/ecommerce/06.jpg" alt="">
                        <div class="flex-grow-1"><span>Winter T-shirt</span>
                          <h6>1 X $ 299.00</h6>
                        </div>
                        <div class="close-circle"><a href="#"><i class="fa fa-times"></i></a></div>
                      </div>
                    </li>
                    <li>
                      <div class="d-flex"><img class="img-fluid b-r-5 img-60" src="../assets/images/ecommerce/02.jpg" alt="">
                        <div class="flex-grow-1"><span>Men Shirt</span>
                          <h6>1 X $ 299.00</h6>
                        </div>
                        <div class="close-circle"><a href="#"><i class="fa fa-times"></i></a></div>
                      </div>
                    </li>
                    <li class="total">
                      <h5 class="mb-0">Subtotal :<span class="f-right">$299.00</span></h5>
                    </li>
                    <li><a class="view-cart" href="cart.html">View Cart</a><a class="view-checkout f-right" href="checkout.html">Checkout</a></li>
                  </ul>
                </div>
              </li>
              <li class="onhover-dropdown">
                <div class="message">
                  <svg>
                    <use href="../assets/svg/icon-sprite.svg#fill-message"></use>
                  </svg><span class="rounded-pill badge-secondary"> </span>
                </div>
                <div class="onhover-show-div message-dropdown">
                  <h6 class="f-18 mb-0 dropdown-title">Message                               </h6>
                  <ul>
                    <li>
                      <div class="d-flex align-items-start">
                        <div class="message-img bg-light-primary"><img src="../assets/images/user/3.jpg" alt=""></div>
                        <div class="flex-grow-1">
                          <h5 class="mb-1"><a href="email_inbox.html">Helen Walter</a></h5>
                          <p>Do you want to go see movie?</p>
                        </div>
                        <div class="notification-right"><i data-feather="x"></i></div>
                      </div>
                    </li>
                    <li>
                      <div class="d-flex align-items-start">
                        <div class="message-img bg-light-primary"><img src="../assets/images/user/6.jpg" alt=""></div>
                        <div class="flex-grow-1">
                          <h5 class="mb-1"><a href="email_inbox.html">Jason Borne</a></h5>
                          <p>Thank you for rating us.</p>
                        </div>
                        <div class="notification-right"><i data-feather="x"></i></div>
                      </div>
                    </li>
                    <li>
                      <div class="d-flex align-items-start">
                        <div class="message-img bg-light-primary"><img src="../assets/images/user/10.jpg" alt=""></div>
                        <div class="flex-grow-1">
                          <h5 class="mb-1"><a href="email_inbox.html">Sarah Loren</a></h5>
                          <p>What`s the project report update?</p>
                        </div>
                        <div class="notification-right"><i data-feather="x"></i></div>
                      </div>
                    </li>
                    <li><a class="f-w-700" href="email-application.html">Check all</a></li>
                  </ul>
                </div>
              </li>
              <li>
                <div class="mode">
                  <svg>
                    <use href="../assets/svg/icon-sprite.svg#fill-dark"></use>
                  </svg>
                </div>
              </li>
              <li class="profile-nav onhover-dropdown p-0">
                <div class="d-flex align-items-center profile-media"><img class="b-r-10 img-40" src="../assets/images/dashboard/profile.png" alt="">
                  <div class="flex-grow-1"><span>Helen Walter</span>
                    <p class="mb-0">Admin <i class="middle fa fa-angle-down"></i></p>
                  </div>
                </div>
                <ul class="profile-dropdown onhover-show-div">
                  <li><a href="user-profile.html"><i data-feather="user"></i><span>Account </span></a></li>
                  <li><a href="email-application.html"><i data-feather="mail"></i><span>Inbox</span></a></li>
                  <li><a href="task.html"><i data-feather="file-text"></i><span>Taskboard</span></a></li>
                  <li><a href="edit-profile.html"><i data-feather="settings"></i><span>Settings</span></a></li>
                  <li><a href="login.html"><i data-feather="log-in"> </i><span>Log in</span></a></li>
                </ul>
              </li>
            </ul>
          </div>
          <script class="result-template" type="text/x-handlebars-template">
            <div class="ProfileCard u-cf">                        
            <div class="ProfileCard-avatar"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-airplay m-0"><path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"></path><polygon points="12 15 17 21 7 21 12 15"></polygon></svg></div>
            <div class="ProfileCard-details">
            <div class="ProfileCard-realName">{{name}}</div>
            </div>
            </div>
          </script>
          <script class="empty-template" type="text/x-handlebars-template"><div class="EmptyMessage">Your search turned up 0 results. This most likely means the backend is down, yikes!</div></script>
        </div>
      </div>
      <!-- Page Header Ends-->
      <!-- Page Body Start-->
      <div class="page-body-wrapper">
        <!-- Page Sidebar Start-->
        <div class="sidebar-wrapper" data-layout="fill-svg">
          <div>
            <div class="logo-wrapper"><a href="index.html"><img class="img-fluid" src="../assets/images/logo/logo.png" alt=""></a>
              <div class="toggle-sidebar">
                <svg class="sidebar-toggle"> 
                  <use href="../assets/svg/icon-sprite.svg#toggle-icon"></use>
                </svg>
              </div>
            </div>
            <div class="logo-icon-wrapper"><a href="index.html"><img class="img-fluid" src="../assets/images/logo/logo-icon.png" alt=""></a></div>
            <nav class="sidebar-main">
              <div class="left-arrow" id="left-arrow"><i data-feather="arrow-left"></i></div>
              <div id="sidebar-menu">
                <ul class="sidebar-links" id="simple-bar">
                  <li class="back-btn"><a href="index.html"><img class="img-fluid" src="../assets/images/logo/logo-icon.png" alt=""></a>
                    <div class="mobile-back text-end"><span>Back</span><i class="fa fa-angle-right ps-2" aria-hidden="true"></i></div>
                  </li>
                  <li class="pin-title sidebar-main-title">
                    <div> 
                      <h6>Pinned</h6>
                    </div>
                  </li>
                  <li class="sidebar-main-title">
                    <div>
                      <h6 class="lan-1">General</h6>
                    </div>
                  </li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title" href="#">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-home"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-home"></use>
                      </svg><span class="lan-3">Dashboard          </span></a>
                    <ul class="sidebar-submenu">
                      <li><a class="lan-4" href="index.html">Default</a></li>
                      <li><a class="lan-5" href="dashboard-02.html">Ecommerce</a></li>
                      <li><a href="dashboard-03.html">Project</a></li>
                    </ul>
                  </li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title" href="#">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-widget"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-widget"></use>
                      </svg><span class="lan-6">Widgets</span></a>
                    <ul class="sidebar-submenu">
                      <li><a href="general-widget.html">General</a></li>
                      <li><a href="chart-widget.html">Chart</a></li>
                    </ul>
                  </li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title" href="#">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-layout"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-layout"></use>
                      </svg><span class="lan-7">Page layout</span></a>
                    <ul class="sidebar-submenu">
                      <li><a href="box-layout.html">Boxed</a></li>
                      <li><a href="layout-rtl.html">RTL</a></li>
                      <li><a href="layout-dark.html">Dark Layout</a></li>
                      <li><a href="hide-on-scroll.html">Hide Nav Scroll</a></li>
                      <li><a href="footer-light.html">Footer Light</a></li>
                      <li><a href="footer-dark.html">Footer Dark</a></li>
                      <li><a href="footer-fixed.html">Footer Fixed</a></li>
                    </ul>
                  </li>
                  <li class="sidebar-main-title">
                    <div>
                      <h6 class="lan-8">Applications</h6>
                    </div>
                  </li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack">    </i><a class="sidebar-link sidebar-title" href="#">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-project"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-project"></use>
                      </svg><span>Project           </span></a>
                    <ul class="sidebar-submenu">
                      <li><a href="projects.html">Project List</a></li>
                      <li><a href="projectcreate.html">Create new</a></li>
                    </ul>
                  </li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title link-nav" href="file-manager.html">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-file"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-file"></use>
                      </svg><span>File manager</span></a></li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack">        </i><a class="sidebar-link sidebar-title link-nav" href="kanban.html">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-board"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-board"></use>
                      </svg><span>kanban Board</span></a></li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title" href="#">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-ecommerce"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-ecommerce"></use>
                      </svg><span>Ecommerce</span></a>
                    <ul class="sidebar-submenu">
                      <li><a href="add-products.html">Add Product</a></li>
                      <li><a href="product.html">Product</a></li>
                      <li><a href="product-page.html">Product page</a></li>
                      <li><a href="list-products.html">Product list</a></li>
                      <li><a href="payment-details.html">Payment Details</a></li>
                      <li><a href="order-history.html">Order History</a></li>
                      <li><a class="submenu-title" href="#">Invoices
                          <h5 class="sub-arrow"><i class="fa fa-angle-right"></i></h5></a>
                        <ul class="submenu-content opensubmegamenu">
                          <li><a href="invoice-1.html">Invoice-1</a></li>
                          <li><a href="invoice-2.html">Invoice-2</a></li>
                          <li><a href="invoice-3.html">Invoice-3</a></li>
                          <li><a href="invoice-4.html">Invoice-4</a></li>
                          <li><a href="invoice-5.html">Invoice-5</a></li>
                          <li><a href="invoice-template.html">Invoice-6</a></li>
                        </ul>
                      </li>
                      <li><a href="cart.html">Cart</a></li>
                      <li><a href="list-wish.html">Wishlist</a></li>
                      <li><a href="checkout.html">Checkout</a></li>
                      <li><a href="pricing.html">Pricing          </a></li>
                    </ul>
                  </li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title" href="#">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-email"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-email"></use>
                      </svg><span>Email</span></a>
                    <ul class="sidebar-submenu">
                      <li><a href="email-application.html">Email App</a></li>
                      <li><a href="email-compose.html">Email Compose</a></li>
                      <li><a href="letter-box.html">Letter Box</a></li>
                    </ul>
                  </li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title" href="#">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-chat"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-chat"></use>
                      </svg><span>Chat</span></a>
                    <ul class="sidebar-submenu">
                      <li><a href="private-chat.html">Private Chat</a></li>
                      <li><a href="group-chat.html">Group Chat</a></li>
                    </ul>
                  </li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title" href="#">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-user"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-user"></use>
                      </svg><span>Users</span></a>
                    <ul class="sidebar-submenu">
                      <li><a href="user-profile.html">Users Profile</a></li>
                      <li><a href="edit-profile.html">Users Edit</a></li>
                      <li><a href="user-cards.html">Users Cards</a></li>
                    </ul>
                  </li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title link-nav" href="bookmark.html">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-bookmark"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-bookmark"> </use>
                      </svg><span>Bookmarks</span></a></li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title link-nav" href="contacts.html">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-contact"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-contact"> </use>
                      </svg><span>Contacts</span></a></li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title link-nav" href="task.html">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-task"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-task"> </use>
                      </svg><span>Tasks</span></a></li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title link-nav" href="calendar-basic.html">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-calendar"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-calender"></use>
                      </svg><span>Calendar</span></a></li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title link-nav" href="social-app.html">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-social"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-social"> </use>
                      </svg><span>Social App</span></a></li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title link-nav" href="to-do.html">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-to-do"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-to-do"> </use>
                      </svg><span>To-Do</span></a></li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title link-nav" href="search.html">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-search"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-search"> </use>
                      </svg><span>Search Result</span></a></li>
                  <li class="sidebar-main-title">
                    <div>
                      <h6>Forms & Table</h6>
                    </div>
                  </li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title" href="#">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-form"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-form"> </use>
                      </svg><span>Forms</span></a>
                    <ul class="sidebar-submenu">
                      <li><a class="submenu-title" href="#">Form Controls
                          <h5 class="sub-arrow"><i class="fa fa-angle-right"></i></h5></a>
                        <ul class="submenu-content opensubmegamenu">
                          <li><a href="form-validation.html">Form Validation</a></li>
                          <li><a href="base-input.html">Base Inputs</a></li>
                          <li><a href="radio-checkbox-control.html">Checkbox & Radio</a></li>
                          <li><a href="input-group.html">Input Groups</a></li>
                          <li> <a href="input-mask.html">Input Mask</a></li>
                          <li><a href="megaoptions.html">Mega Options</a></li>
                        </ul>
                      </li>
                      <li><a class="submenu-title" href="#">Form Widgets
                          <h5 class="sub-arrow"><i class="fa fa-angle-right"></i></h5></a>
                        <ul class="submenu-content opensubmegamenu">
                          <li><a href="datepicker.html">Datepicker</a></li>
                          <li><a href="touchspin.html">Touchspin</a></li>
                          <li><a href="select2.html">Select2</a></li>
                          <li><a href="switch.html">Switch</a></li>
                          <li><a href="typeahead.html">Typeahead</a></li>
                          <li><a href="clipboard.html">Clipboard</a></li>
                        </ul>
                      </li>
                      <li><a class="submenu-title" href="#">Form layout
                          <h5 class="sub-arrow"><i class="fa fa-angle-right"></i></h5></a>
                        <ul class="submenu-content opensubmegamenu">
                          <li><a href="form-wizard.html">Form Wizard 1</a></li>
                          <li><a href="form-wizard-two.html">Form Wizard 2</a></li>
                          <li><a href="two-factor.html">Two Factor</a></li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title" href="#">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-table"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-table"></use>
                      </svg><span>Tables</span></a>
                    <ul class="sidebar-submenu">
                      <li><a class="submenu-title" href="#">Bootstrap Tables
                          <h5 class="sub-arrow"><i class="fa fa-angle-right"></i></h5></a>
                        <ul class="submenu-content opensubmegamenu">
                          <li><a href="bootstrap-basic-table.html">Basic Tables</a></li>
                          <li><a href="table-components.html">Table components</a></li>
                        </ul>
                      </li>
                      <li><a class="submenu-title" href="#">Data Tables
                          <h5 class="sub-arrow"><i class="fa fa-angle-right"></i></h5></a>
                        <ul class="submenu-content opensubmegamenu">
                          <li><a href="datatable-basic-init.html">Basic Init</a></li>
                          <li> <a href="datatable-advance.html">Advance Init </a></li>
                          <li><a href="datatable-API.html">API</a></li>
                          <li><a href="datatable-data-source.html">Data Sources</a></li>
                        </ul>
                      </li>
                      <li><a href="datatable-ext-autofill.html">Ex. Data Tables</a></li>
                      <li><a href="jsgrid-table.html">Js Grid Table        </a></li>
                    </ul>
                  </li>
                  <li class="sidebar-main-title">
                    <div>
                      <h6>Components</h6>
                    </div>
                  </li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title" href="#">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-ui-kits"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-ui-kits"></use>
                      </svg><span>Ui Kits</span></a>
                    <ul class="sidebar-submenu">
                      <li><a href="typography.html">Typography</a></li>
                      <li><a href="avatars.html">Avatars</a></li>
                      <li><a href="helper-classes.html">helper classes</a></li>
                      <li><a href="grid.html">Grid</a></li>
                      <li><a href="tag-pills.html">Tag & pills</a></li>
                      <li><a href="progress-bar.html">Progress</a></li>
                      <li><a href="modal.html">Modal</a></li>
                      <li><a href="alert.html">Alert</a></li>
                      <li><a href="popover.html">Popover</a></li>
                      <li><a href="tooltip.html">Tooltip</a></li>
                      <li><a href="dropdown.html">Dropdown</a></li>
                      <li><a href="according.html">Accordion</a></li>
                      <li><a href="tab-bootstrap.html">Tabs</a></li>
                      <li><a href="list.html">Lists</a></li>
                    </ul>
                  </li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title" href="#">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-bonus-kit"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-bonus-kit"></use>
                      </svg><span>Bonus Ui</span></a>
                    <ul class="sidebar-submenu">
                      <li><a href="scrollable.html">Scrollable</a></li>
                      <li><a href="tree.html">Tree view</a></li>
                      <li><a href="toasts.html">Toasts</a></li>
                      <li><a href="rating.html">Rating</a></li>
                      <li><a href="dropzone.html">dropzone</a></li>
                      <li><a href="tour.html">Tour</a></li>
                      <li><a href="sweet-alert2.html">SweetAlert2</a></li>
                      <li><a href="modal-animated.html">Animated Modal</a></li>
                      <li><a href="owl-carousel.html">Owl Carousel</a></li>
                      <li><a href="ribbons.html">Ribbons</a></li>
                      <li><a href="pagination.html">Pagination</a></li>
                      <li><a href="breadcrumb.html">Breadcrumb</a></li>
                      <li><a href="range-slider.html">Range Slider</a></li>
                      <li><a href="image-cropper.html">Image cropper</a></li>
                      <li><a href="basic-card.html">Basic Card</a></li>
                      <li><a href="creative-card.html">Creative Card</a></li>
                      <li><a href="dragable-card.html">Draggable Card</a></li>
                      <li><a href="timeline-v-1.html">Timeline </a></li>
                    </ul>
                  </li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title" href="#">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-animation"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-animation"></use>
                      </svg><span>Animation</span></a>
                    <ul class="sidebar-submenu">
                      <li><a href="animate.html">Animate</a></li>
                      <li><a href="scroll-reval.html">Scroll Reveal</a></li>
                      <li><a href="AOS.html">AOS animation</a></li>
                      <li><a href="tilt.html">Tilt Animation</a></li>
                      <li><a href="wow.html">Wow Animation</a></li>
                    </ul>
                  </li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title" href="#">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-icons"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-icons"></use>
                      </svg><span>Icons</span></a>
                    <ul class="sidebar-submenu">
                      <li><a href="flag-icon.html">Flag icon</a></li>
                      <li><a href="font-awesome.html">Fontawesome Icon</a></li>
                      <li><a href="ico-icon.html">Ico Icon</a></li>
                      <li><a href="themify-icon.html">Themify Icon</a></li>
                      <li><a href="feather-icon.html">Feather icon</a></li>
                      <li><a href="whether-icon.html">Whether Icon</a></li>
                    </ul>
                  </li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title" href="#">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-button"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-button"></use>
                      </svg><span>Buttons</span></a>
                    <ul class="sidebar-submenu">
                      <li><a href="buttons.html">Default Style</a></li>
                      <li><a href="button-group.html">Button Group</a></li>
                    </ul>
                  </li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title" href="#">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-charts"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-charts"></use>
                      </svg><span>Charts</span></a>
                    <ul class="sidebar-submenu">
                      <li><a href="chart-apex.html">Apex Chart</a></li>
                      <li><a href="chart-google.html">Google Chart</a></li>
                      <li><a href="chart-sparkline.html">Sparkline chart</a></li>
                      <li><a href="chart-flot.html">Flot Chart</a></li>
                      <li><a href="chart-knob.html">Knob Chart</a></li>
                      <li><a href="chart-morris.html">Morris Chart</a></li>
                      <li><a href="chartjs.html">Chartjs Chart</a></li>
                      <li><a href="chartist.html">Chartist Chart</a></li>
                      <li><a href="chart-peity.html">Peity Chart</a></li>
                      <li><a href="echarts.html">Echarts</a></li>
                    </ul>
                  </li>
                  <li class="sidebar-main-title">
                    <div>
                      <h6>Pages</h6>
                    </div>
                  </li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title link-nav" href="landing-page.html">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-landing-page"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-landing-page"></use>
                      </svg><span>Landing page</span></a></li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title link-nav" href="sample-page.html">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-sample-page"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-sample-page"></use>
                      </svg><span>Sample page</span></a></li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title link-nav" href="translate.html">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-internationalization"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-internationalization"></use>
                      </svg><span>Translate</span></a></li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title link-nav" href="../starter-kit/index.html" target="_blank">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-starter-kit"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-starter-kit"></use>
                      </svg><span>Starter kit</span></a></li>
                  <li class="mega-menu sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title" href="#">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-others"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-others"></use>
                      </svg><span>Others</span></a>
                    <div class="mega-menu-container menu-content">
                      <div class="container-fluid">
                        <div class="row">
                          <div class="col mega-box">
                            <div class="link-section">
                              <div class="submenu-title">
                                <h5>Error Page</h5>
                              </div>
                              <ul class="submenu-content opensubmegamenu">
                                <li><a href="error-400.html">Error 400</a></li>
                                <li><a href="error-401.html">Error 401</a></li>
                                <li><a href="error-403.html">Error 403</a></li>
                                <li><a href="error-404.html">Error 404</a></li>
                                <li><a href="error-500.html">Error 500</a></li>
                                <li><a href="error-503.html">Error 503</a></li>
                              </ul>
                            </div>
                          </div>
                          <div class="col mega-box">
                            <div class="link-section">
                              <div class="submenu-title">
                                <h5> Authentication</h5>
                              </div>
                              <ul class="submenu-content opensubmegamenu">
                                <li><a href="login.html" target="_blank">Login Simple</a></li>
                                <li><a href="login_one.html" target="_blank">Login with bg image</a></li>
                                <li><a href="login_two.html" target="_blank">Login with image two                      </a></li>
                                <li><a href="login-bs-validation.html" target="_blank">Login With validation</a></li>
                                <li><a href="login-bs-tt-validation.html" target="_blank">Login with tooltip</a></li>
                                <li><a href="login-sa-validation.html" target="_blank">Login with sweetalert</a></li>
                                <li><a href="sign-up.html" target="_blank">Register Simple</a></li>
                                <li><a href="sign-up-one.html" target="_blank">Register with Bg Image                              </a></li>
                                <li><a href="sign-up-two.html" target="_blank">Register with image two</a></li>
                                <li><a href="sign-up-wizard.html" target="_blank">Register wizard</a></li>
                                <li><a href="unlock.html">Unlock User</a></li>
                                <li><a href="forget-password.html">Forget Password</a></li>
                                <li><a href="reset-password.html">Reset Password</a></li>
                                <li><a href="maintenance.html">Maintenance</a></li>
                              </ul>
                            </div>
                          </div>
                          <div class="col mega-box">
                            <div class="link-section">
                              <div class="submenu-title">
                                <h5>Coming Soon</h5>
                              </div>
                              <ul class="submenu-content opensubmegamenu">
                                <li><a href="comingsoon.html">Coming Simple</a></li>
                                <li><a href="comingsoon-bg-video.html">Coming with Bg video</a></li>
                                <li><a href="comingsoon-bg-img.html">Coming with Bg Image</a></li>
                              </ul>
                            </div>
                          </div>
                          <div class="col mega-box">
                            <div class="link-section">
                              <div class="submenu-title">
                                <h5>Email templates</h5>
                              </div>
                              <ul class="submenu-content opensubmegamenu">
                                <li><a href="basic-template.html">Basic Email</a></li>
                                <li><a href="email-header.html">Basic With Header</a></li>
                                <li><a href="template-email.html">Ecomerce Template</a></li>
                                <li><a href="template-email-2.html">Email Template 2</a></li>
                                <li><a href="ecommerce-templates.html">Ecommerce Email</a></li>
                                <li><a href="email-order-success.html">Order Success</a></li>
                              </ul>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="sidebar-main-title">
                    <div>
                      <h6>Miscellaneous</h6>
                    </div>
                  </li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title" href="#">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-gallery"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-gallery"></use>
                      </svg><span>Gallery</span></a>
                    <ul class="sidebar-submenu">
                      <li><a href="gallery.html">Gallery Grid</a></li>
                      <li><a href="gallery-with-description.html">Gallery Grid Desc</a></li>
                      <li><a href="gallery-masonry.html">Masonry Gallery</a></li>
                      <li><a href="masonry-gallery-with-disc.html">Masonry with Desc</a></li>
                      <li><a href="gallery-hover.html">Hover Effects</a></li>
                    </ul>
                  </li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title" href="#">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-blog"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-blog"></use>
                      </svg><span>Blog</span></a>
                    <ul class="sidebar-submenu">
                      <li><a href="blog.html">Blog Details</a></li>
                      <li><a href="blog-single.html">Blog Single</a></li>
                      <li><a href="add-post.html">Add Post</a></li>
                    </ul>
                  </li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title link-nav" href="faq.html">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-faq"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-faq"></use>
                      </svg><span>FAQ</span></a></li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title" href="#">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-job-search"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-job-search"></use>
                      </svg><span>Job Search</span></a>
                    <ul class="sidebar-submenu">
                      <li><a href="job-cards-view.html">Cards view</a></li>
                      <li><a href="job-list-view.html">List View</a></li>
                      <li><a href="job-details.html">Job Details</a></li>
                      <li><a href="job-apply.html">Apply</a></li>
                    </ul>
                  </li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title" href="#">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-learning"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-learning"></use>
                      </svg><span>Learning</span></a>
                    <ul class="sidebar-submenu">
                      <li><a href="learning-list-view.html">Learning List</a></li>
                      <li><a href="learning-detailed.html">Detailed Course</a></li>
                    </ul>
                  </li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title" href="#">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-maps"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-maps"></use>
                      </svg><span>Maps</span></a>
                    <ul class="sidebar-submenu">
                      <li><a href="map-js.html">Maps JS</a></li>
                      <li><a href="vector-map.html">Vector Maps</a></li>
                    </ul>
                  </li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title" href="#">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-editors"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-editors"></use>
                      </svg><span>Editors</span></a>
                    <ul class="sidebar-submenu">
                      <li><a href="summernote.html">Summer Note</a></li>
                      <li><a href="ckeditor.html">CK editor</a></li>
                      <li><a href="simple-MDE.html">MDE editor</a></li>
                      <li><a href="ace-code-editor.html">ACE code editor </a></li>
                    </ul>
                  </li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title link-nav" href="knowledgebase.html">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-knowledgebase"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-knowledgebase"></use>
                      </svg><span>Knowledgebase</span></a></li>
                  <li class="sidebar-list"><i class="fa fa-thumb-tack"></i><a class="sidebar-link sidebar-title link-nav" href="support-ticket.html">
                      <svg class="stroke-icon">
                        <use href="../assets/svg/icon-sprite.svg#stroke-support-tickets"></use>
                      </svg>
                      <svg class="fill-icon">
                        <use href="../assets/svg/icon-sprite.svg#fill-support-tickets"></use>
                      </svg><span>Support Ticket</span></a></li>
                </ul>
              </div>
              <div class="right-arrow" id="right-arrow"><i data-feather="arrow-right"></i></div>
            </nav>
          </div>
        </div>
        <!-- Page Sidebar Ends-->
        <div class="page-body">
          <div class="container-fluid">
            <div class="page-title">
              <div class="row">
                <div class="col-sm-6 ps-0">
                  <h3>Feather Icons</h3>
                </div>
                <div class="col-sm-6 pe-0">
                  <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.html">                                       
                        <svg class="stroke-icon">
                          <use href="../assets/svg/icon-sprite.svg#stroke-home"></use>
                        </svg></a></li>
                    <li class="breadcrumb-item">Icons</li>
                    <li class="breadcrumb-item active">Feather Icons</li>
                  </ol>
                </div>
              </div>
            </div>
          </div>
          <!-- Container-fluid starts-->
          <div class="container-fluid">
            <div class="row">
              <div class="col-sm-12">
                <div class="card">
                  <div class="card-header pb-0">
                    <h3 class="m-b-0">Feather Icons</h3>
                  </div>
                  <div class="card-body">
                    <div class="row icon-lists feather-icons">
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="activity"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">activity</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="airplay"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">airplay</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="alert-circle"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">alert-circle</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="alert-octagon"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">alert-octagon</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="alert-triangle"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">alert-triangle</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="align-center"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">align-center</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="align-justify"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">align-justify</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="align-left"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">align-left</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="align-right"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">align-right</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="anchor"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">anchor</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="aperture"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">aperture</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="archive"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">archive</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="arrow-down-circle"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">arrow-down-circle</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="arrow-down-left"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">arrow-down-left</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="arrow-down-right"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">arrow-down-right</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="arrow-down"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">arrow-down</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="arrow-left-circle"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">arrow-left-circle</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="arrow-left"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">arrow-left</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="arrow-right-circle"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">arrow-right-circle</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="arrow-right"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">arrow-right</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="arrow-up-circle"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">arrow-up-circle</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="arrow-up-left"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">arrow-up-left</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="arrow-up-right"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">arrow-up-right</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="arrow-up"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">arrow-up</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="at-sign"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">at-sign</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="award"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">award</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="bar-chart-2"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">bar-chart-2</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="bar-chart"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">bar-chart</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="battery-charging"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">battery-charging</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="battery"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">battery</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="bell-off"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">bell-off</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="bell"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">bell</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="bluetooth"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">bluetooth</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="bold"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">bold</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="book-open"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">book-open</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="book"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">book</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="bookmark"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">bookmark</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="box"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">box</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="briefcase"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">briefcase</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="calendar"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">calendar</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="camera-off"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">camera-off</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="camera"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">camera</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="cast"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">cast</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="check-circle"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">check-circle</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="check-square"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">check-square</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="check"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">check</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="chevron-down"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">chevron-down</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="chevron-left"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">chevron-left</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="chevron-right"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">chevron-right</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="chevron-up"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">chevron-up</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="chevrons-down"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">chevrons-down</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="chevrons-left"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">chevrons-left</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="chevrons-right"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">chevrons-right</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="chevrons-up"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">chevrons-up</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="chrome"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">chrome</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="circle"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">circle</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="clipboard"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">clipboard</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="clock"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">clock</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="cloud-drizzle"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">cloud-drizzle</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="cloud-lightning"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">cloud-lightning</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="cloud-off"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">cloud-off</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="cloud-rain"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">cloud-rain</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="cloud-snow"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">cloud-snow</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="cloud"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">cloud</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="code"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">code</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="codepen"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">codepen</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="coffee"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">coffee</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="command"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">command</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="compass"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">compass</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="copy"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">copy</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="corner-down-left"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">corner-down-left</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="corner-down-right"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">corner-down-right</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="corner-left-down"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">corner-left-down</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="corner-left-up"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">corner-left-up</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="corner-right-down"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">corner-right-down</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="corner-right-up"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">corner-right-up</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="corner-up-left"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">corner-up-left</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="corner-up-right"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">corner-up-right</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="cpu"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">cpu</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="credit-card"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">credit-card</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="crop"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">crop</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="crosshair"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">crosshair</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="database"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">database</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="delete"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">delete</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="disc"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">disc</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="dollar-sign"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">dollar-sign</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="download-cloud"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">download-cloud</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="download"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">download</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="droplet"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">droplet</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="edit-2"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">edit-2</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="edit-3"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">edit-3</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="edit"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">edit</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="external-link"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">external-link</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="eye-off"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">eye-off</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="eye"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">eye</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="facebook"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">facebook</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="fast-forward"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">fast-forward</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="feather"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">feather</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="file-minus"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">file-minus</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="file-plus"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">file-plus</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="file-text"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">file-text</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="file"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">file</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="film"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">film</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="filter"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">filter</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="flag"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">flag</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="folder-minus"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">folder-minus</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="folder-plus"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">folder-plus</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="folder"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">folder</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="gift"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">gift</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="git-branch"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">git-branch</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="git-commit"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">git-commit</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="git-merge"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">git-merge</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="git-pull-request"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">git-pull-request</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="github"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">github</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="gitlab"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">gitlab</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="globe"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">globe</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="grid"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">grid</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="hard-drive"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">hard-drive</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="hash"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">hash</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="headphones"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">headphones</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="heart"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">heart</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="help-circle"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">help-circle</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="home"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">home</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="image"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">image</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="inbox"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">inbox</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="info"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">info</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="instagram"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">instagram</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="italic"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">italic</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="layers"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">layers</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="layout"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">layout</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="life-buoy"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">life-buoy</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="link-2"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">link-2</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="link"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">link</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="linkedin"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">linkedin</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="list"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">list</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="loader"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">loader</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="lock"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">lock</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="log-in"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">log-in</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="log-out"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">log-out</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="mail"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">mail</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="map-pin"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">map-pin</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="map"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">map</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="maximize-2"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">maximize-2</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="maximize"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">maximize</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="menu"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">menu</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="message-circle"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">message-circle</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="message-square"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">message-square</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="mic-off"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">mic-off</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="mic"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">mic</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="minimize-2"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">minimize-2</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="minimize"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">minimize</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="minus-circle"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">minus-circle</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="minus-square"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">minus-square</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="minus"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">minus</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="monitor"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">monitor</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="moon"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">moon</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="more-horizontal"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">more-horizontal</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="more-vertical"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">more-vertical</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="move"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">move</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="music"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">music</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="navigation-2"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">navigation-2</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="navigation"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">navigation</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="octagon"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">octagon</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="package"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">package</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="paperclip"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">paperclip</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="pause-circle"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">pause-circle</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="pause"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">pause</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="percent"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">percent</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="phone-call"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">phone-call</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="phone-forwarded"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">phone-forwarded</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="phone-incoming"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">phone-incoming</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="phone-missed"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">phone-missed</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="phone-off"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">phone-off</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="phone-outgoing"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">phone-outgoing</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="phone"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">phone</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="pie-chart"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">pie-chart</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="play-circle"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">play-circle</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="play"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">play</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="plus-circle"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">plus-circle</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="plus-square"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">plus-square</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="plus"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">plus</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="pocket"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">pocket</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="power"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">power</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="printer"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">printer</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="radio"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">radio</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="refresh-ccw"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">refresh-ccw</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="refresh-cw"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">refresh-cw</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="repeat"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">repeat</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="rewind"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">rewind</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="rotate-ccw"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">rotate-ccw</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="rotate-cw"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">rotate-cw</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="rss"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">rss</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="save"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">save</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="scissors"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">scissors</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="search"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">search</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="send"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">send</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="server"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">server</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="settings"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">settings</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="share-2"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">share-2</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="share"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">share</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="shield-off"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">shield-off</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="shield"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">shield</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="shopping-bag"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">shopping-bag</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="shopping-cart"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">shopping-cart</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="shuffle"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">shuffle</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="sidebar"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">sidebar</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="skip-back"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">skip-back</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="skip-forward"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">skip-forward</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="slack"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">slack</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="slash"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">slash</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="sliders"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">sliders</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="smartphone"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">smartphone</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="speaker"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">speaker</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="square"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">square</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="star"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">star</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="stop-circle"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">stop-circle</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="sun"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">sun</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="sunrise"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">sunrise</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="sunset"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">sunset</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="tablet"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">tablet</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="tag"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">tag</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="target"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">target</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="terminal"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">terminal</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="thermometer"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">thermometer</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="thumbs-down"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">thumbs-down</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="thumbs-up"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">thumbs-up</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="toggle-left"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">toggle-left</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="toggle-right"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">toggle-right</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="trash-2"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">trash-2</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="trash"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">trash</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="trending-down"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">trending-down</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="trending-up"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">trending-up</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="triangle"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">triangle</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="truck"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">truck</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="tv"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">tv</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="twitter"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">twitter</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="type"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">type</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="umbrella"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">umbrella</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="underline"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">underline</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="unlock"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">unlock</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="upload-cloud"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">upload-cloud</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="upload"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">upload</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="user-check"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">user-check</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="user-minus"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">user-minus</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="user-plus"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">user-plus</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="user-x"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">user-x</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="user"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">user</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="users"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">users</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="video-off"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">video-off</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="video"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">video</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="voicemail"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">voicemail</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="volume-1"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">volume-1</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="volume-2"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">volume-2</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="volume-x"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">volume-x</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="volume"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">volume</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="watch"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">watch</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="wifi-off"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">wifi-off</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="wifi"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">wifi</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="wind"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">wind</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="x-circle"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">x-circle</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="x-square"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">x-square</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="x"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">x</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="youtube"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">youtube</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="zap-off"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">zap-off</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="zap"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">zap</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="zoom-in"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">zoom-in</h6>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 col-sm-6 col-xl-4">
                        <div class="d-flex"><i data-feather="zoom-out"></i>
                          <div class="flex-grow-1 align-self-center">
                            <h6 class="mt-0">zoom-out</h6>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- Container-fluid Ends-->
        </div>
        <!-- footer start-->
        <footer class="footer">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-6 p-0 footer-copyright">
                <p class="mb-0">Copyright 2023 © Dunzo theme by <a href="Http://www.bootstrapmb.com">bootstrapMB</a></p>
              </div>
              <div class="col-md-6 p-0">
                <p class="heart mb-0">Hand crafted &amp; made with
                  <svg class="footer-icon">
                    <use href="../assets/svg/icon-sprite.svg#heart"></use>
                  </svg>
                </p>
              </div>
            </div>
          </div>
        </footer>
      </div>
      <div class="icon-hover-bottom p-fixed fa-fa-icon-show-div opecity-0">
        <div class="container-fluid">
          <div class="row">
            <div class="icon-popup">
              <div class="close-icon"><i class="icofont icofont-close"></i></div>
              <div class="icon-first"><i id="icon_main"></i></div>
              <div class="icon-class">
                <label class="icon-title">data-feather</label><span id="fclass1"></span>
              </div>
              <div class="icon-last icon-last">
                <label class="icon-title">Markup</label>
                <div class="form-inline">
                  <div class="form-group">
                    <input class="inp-val form-control m-r-10" id="input_copy" type="text" value="" readonly="readonly">
                    <button class="btn btn-primary notification" onclick="myFunction()">Copy text</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- latest jquery-->
    <script src="../assets/js/jquery.min.js"></script>
    <!-- Bootstrap js-->
    <script src="../assets/js/bootstrap/bootstrap.bundle.min.js"></script>
    <!-- feather icon js-->
    <script src="../assets/js/icons/feather-icon/feather.min.js"></script>
    <script src="../assets/js/icons/feather-icon/feather-icon.js"></script>
    <!-- scrollbar js-->
    <script src="../assets/js/scrollbar/simplebar.js"></script>
    <script src="../assets/js/scrollbar/custom.js"></script>
    <!-- Sidebar jquery-->
    <script src="../assets/js/config.js"></script>
    <!-- Plugins JS start-->
    <script src="../assets/js/sidebar-menu.js"></script>
    <script src="../assets/js/sidebar-pin.js"></script>
    <script src="../assets/js/slick/slick.min.js"></script>
    <script src="../assets/js/slick/slick.js"></script>
    <script src="../assets/js/header-slick.js"></script>
    <script src="../assets/js/notify/bootstrap-notify.min.js"></script>
    <script src="../assets/js/icons/icons-notify.js"></script>
    <script src="../assets/js/icons/feather-icon/feather-icon-clipart.js"></script>
    <!-- Plugins JS Ends-->
    <!-- Theme js-->
    <script src="../assets/js/script.js"></script>
    <script src="../assets/js/theme-customizer/customizer.js"></script>
    <!-- Plugin used-->
  </body>
</html>